<template>
  <div>
    <!-- 页面标题 -->
    <h1>我是引流获客界面</h1>

    <!-- 遮罩层 -->
    <div class="overlay" v-if="isOverlayVisible"></div>
    <!-- 点击按钮触发 showRainbow 方法 -->
    <el-button type="primary" @click="showRainbow()">点击我</el-button>
    <!-- 彩虹效果的 div，绑定 active 类以控制动画 -->
    <div class="rainbow-effect" ref="rainbowEffect"></div>
    <div>内容</div>
    <audio ref="dingSound" :src="voicePath"></audio>
  </div>
</template>

<script setup>
import { ref } from "vue"; // 导入 ref 函数用于创建响应式变量
import { gsap } from "gsap";

// 创建响应式变量 isActive，用于控制彩虹效果的显示状态
const isActive = ref(false);
const rainbowEffect = ref(null); // 用于引用彩虹效果的 DOM 元素
const isOverlayVisible = ref(false); // 控制遮罩层的显示状态
const dingSound = ref(null);
const voicePath = ref("")

const showRainbow = () => {
  voicePath.value = new URL("", import.meta.url).href;
  isOverlayVisible.value = true; // 显示遮罩层
  // 设置初始状态
  gsap.set(rainbowEffect.value, { scale: 0, opacity: 0 });

  // 动画效果
  gsap.to(rainbowEffect.value, {
    scale: 1, // 放大到原始大小
    opacity: 1, // 透明度变为 1
    duration: 1, // 动画持续时间
    ease: "power2.out", // 缓动效果
    onComplete: () => {
      dingSound.value.play(); // 播放背景音乐
      // 动画完成后，设置回初始状态
      gsap.to(rainbowEffect.value, {
        scale: 0, // 缩小回 0
        opacity: 0, // 透明度变为 0
        duration: 1, // 动画持续时间
        delay: 1, // 延迟 1 秒后开始
        ease: "power2.in", // 缓动效果
        onComplete: () => {
          dingSound.value.play();
          console.log(dingSound);
          isOverlayVisible.value = false; // 隐藏遮罩层
        },
      });
    },
  });
};
</script>

<style scoped>
/* 按钮样式 */
.rainbow-button {
  padding: 10px 20px; /* 内边距 */
  font-size: 20px; /* 字体大小 */
  margin-top: 20px; /* 上边距 */
  border: none; /* 无边框 */
  border-radius: 5px; /* 圆角 */
  background-color: #007bff; /* 背景颜色 */
  color: white; /* 字体颜色 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
  transition: background-color 0.3s; /* 背景颜色过渡效果 */
}

/* 按钮悬停样式 */
.rainbow-button:hover {
  background-color: #0056b3; /* 悬停时的背景颜色 */
}
.rainbow-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.4;
  transition: 0.3s;
}

.rainbow-effect {
  position: absolute; /* 绝对定位 */
  top: auto; /* 顶部位置 */
  left: auto; /* 左侧位置 */
  width: 20%; /* 宽度占满父元素 */
  height: 20%; /* 高度占满父元素 */
  background-size: 100%;
  background-image: url("https://img.zcool.cn/community/011bf05b0e5b15a8012043d8cf1714.gif");
  opacity: 0; /* 初始透明度 */
  pointer-events: none; /* 不阻止点击事件 */
  z-index: 30; /* 确保在其他元素之上 */
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 20;
}
</style>
